<template>
  <div class="selfPay">
    <div class="header-wrap">
      <span class="header-wrap-left" @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">自助缴费</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="selfPay-list" style="margin-top:1.5rem;">
      <span class="list-title">物业信息</span>
      <div class="list-content" @click="showResidential" v-if="Residential">
        <span>{{Residential}}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="list-content" @click="showResidential" v-else>
        <span>{{Residential?Residential:'选择您的物业'}}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <div class="selfPay-list">
      <span class="list-title">缴费类型</span>
      <div class="list-content" @click="showListType" v-if="listType">
        <span>{{listType}}</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
      <div class="list-content" @click="showListType" v-else>
        <span>选择缴费类型</span>
        <span><i class="iconfont icon-xiajiantou"></i></span>
      </div>
    </div>
    <div class="selfPay-list">
      <span class="list-title">缴费金额</span>
      <div class="list-content">
        <van-field type='number' clearable v-model="household_price" placeholder="请填写缴费金额"/>
      </div>
    </div>
    <div class="selfPay-list">
      <span class="list-title">联系人姓名</span>
      <div class="list-content">
        <van-field clearable v-model="household_name" placeholder="请填写联系人姓名"/>
      </div>
    </div>
    <div class="selfPay-list">
      <span class="list-title">联系人电话</span>
      <div class="list-content">
        <van-field type='tel' clearable v-model="household_phone" placeholder="请填写联系人电话"/>
      </div>
    </div>
    <div class="selfPay-textarea">
      <div class="list-text" style="border:none;">
        <van-field
          clearable
          class="minHeight"
          v-model="household_content"
          type="textarea"
          placeholder="其他备注信息"
          rows="6"
          autosize
        />
      </div>
    </div>
    <div class="submit" @click="addpay">
      提交
    </div>
    <!-- 缴费类型 -->
    <van-popup v-model="showPicker" position="bottom" >
      <van-picker
        show-toolbar
        :columns="listData"
        @cancel="showPicker=false"
        @confirm="FnlistType"
      />
    </van-popup>
    <!-- 物业小区 -->
    <van-popup v-model="markPicker" position="bottom" >
      <van-picker
        show-toolbar
        :columns="itemData"
        @cancel="markPicker=false"
        @confirm="FnResidential"
      />
    </van-popup>
  </div>
</template>
<script>
import { Picker,Field,Popup} from 'vant';
import api from '../../api/api.js'
export default {
  data(){
    return{
      showPicker: false,
      markPicker: false,
      backId: '',
      backway: '',
      listData:[],
      itemData:[],
      disabled:true,
      Residential: '',
      ResidentialId: '',
      listType: '',
      listTypeId: '',
      houseId: '',
      household_name:'',
      household_phone:'',
      household_price:'',
      household_content:'',
    }
  },
  created(){
    this.getHouses()
  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    // 类型
    paylist(){
      this.$get(api.paylist, {
        params: {
          residential_id: this.ResidentialId?this.ResidentialId:undefined
        }
      })
      .then((response) => {
        this.listData = response.data.data.list
      })
      .catch((error) => {
        console.log(error)
      });
    },
   // 提交参数给后台支付
    addpay() {
      if(!this.Residential){
        this.$toast('请先选择小区')
        return
      }
      if(!this.listType){
        this.$toast('请先选择缴费类型')
        return
      }
      if(!this.household_price){
        this.$toast('请输入缴费金额')
        return
      }
      if(!this.household_name){
        this.$toast('请输入联系人姓名')
        return
      }
      if(!this.household_phone){
        this.$toast('请输入联系人电话')
        return
      }
      this.$post(api.userpay, {
        residential_id: this.ResidentialId, //小区id
        type_id: this.listTypeId,  //类型id
        remark: this.household_content,  //备注
        house_id: this.houseId, //房屋id
        household_name: this.household_name, //联系人姓名
        household_phone: this.household_phone, //联系人电话
        cost: this.household_price  //数额
      })
      .then(response => {
        if(response.data.code==0){
          this.$toast(response.data.msg)
          return
        }
        if (response.data.code == 1) {
          this.backId = response.data.data.id;
          this.backway = response.data.data.way;
          // 缴费支付
          var back_url = encodeURIComponent(
            encodeURIComponent(window.location.href)
          );
          console.log(back_url);
          window.location.href = api.moneypay + "?id=" + this.backId + "&way=" + this.backway + "&back_url=" + back_url;
        }
      })
      .catch(error => {
        console.log(error);
      });
    },
    // 获取物业
    getHouses(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.myHouses, {})
      .then((response) => {
        this.$toast.clear();
        this.itemData = response.data.data.houses
        // this.itemData.forEach((element,index) => {
        //   element.disabled = true
        //   console.log('element',element.disabled)
        //   if(element.modular_selfpay==0){
        //     element.disabled = true
        //   }else{
        //     element.disabled = false
        //   }
        // });
        // console.log('this.itemData',this.itemData)
        this.Residential = response.data.data.houses[1].text
        this.houseId = response.data.data.houses[1].id
        this.ResidentialId = response.data.data.houses[1].residential_id
        this.paylist()
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error)
      });
    },
    showListType(){
      if(this.listData <= 0){
        this.showPicker = false;
        this.$toast('当前小区后台未设置缴费类型')
        return
      }else{
        this.showPicker = true;
      }
    },
    showResidential(){
      this.markPicker = true;
    },
    FnlistType(list) {
      this.listType = list.text
      this.listTypeId = list.id
      this.showPicker = false;
    },
    FnResidential(list) {
      this.Residential = list.text
      this.houseId = list.id
      this.ResidentialId = list.residential_id
      this.markPicker = false;
      this.listType = ''
      this.paylist()
      if(list.id==0){
        this.$router.push('/addHome')
        return
      }
    }
  },
  components: {
    [Picker.name]:Picker,
    [Popup.name]:Popup,
    [Field.name]:Field
  }
}
</script>
<style>
.van-cell-group{
  background: none;
}
.selfPay .van-field__control{
  /* font-size: .28rem; */
}

</style>
<style scoped>
.list-content{
  margin: .2rem .5rem;
  display: flex;
  color: #000;
  font-weight: bold;
  height: 1rem;
  line-height: 1rem;
  border-radius: .5rem;
  /* font-size: .3rem; */
  border: 0.02rem solid #ddd;
  background: #fff;
}
.list-content span:nth-of-type(1){
  text-indent: .35rem;
  flex: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.list-content span:nth-of-type(2){
  text-align: center;
  flex: 1;
}
.list-text{
  margin: 0 .5rem;
}
.selfPay .selfPay-list{
  margin-bottom: .3rem;
}
.selfPay .selfPay-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.selfPay .selfPay-textarea .van-cell{
  background: #fff;
  font-weight: bold;
  padding: .15rem .15rem;
  border: 1px solid #ddd;
  border-radius: .2rem;
}
.list-title{
  display: block;
  margin:0rem .8rem;
  color: #57c5c6 ;
  font-weight: bold;
}
.minHeight{
  min-height: 3rem;
  padding: .15rem;
}
.submit{
  margin: .3rem .5rem .25rem .5rem;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
  font-weight: bold;
}
</style>
